<template>
    <div>
        <ul>
            <li>
                <NuxtLink to="/">首页</NuxtLink>
            </li>
            <li>
                <NuxtLink to="/artcleslist/1">文章页</NuxtLink>
            </li>
            <li @click="toMy">
                关于我们
            </li>
            <li><a href="/artcleslist/444">文章页面444</a></li>
        </ul>
    </div>
</template>
  
<script setup>
// definePageMeta({
//     // middleware: ["auth"]
//     middleware: 'auth'
//     // or middleware: 'auth'
// })

const toMy = () => {
    // 第一种写法：
    // navigateTo("aboutmy");
    // 携带参数写法：编程式路由
    navigateTo({
        path: "/aboutmy",
        query: {
            id: 111
        },
    });
}

</script>
  
<style lang="less">
ul {
    display: flex;

    li {
        width: 100px;
        list-style: none;
    }
}
</style>